<!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>UI&#x8bbe;&#x8ba1;&#x65b9;&#x6848;</title>
            <style>
/* From extension vscode.github */
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.vscode-dark img[src$=\#gh-light-mode-only],
.vscode-light img[src$=\#gh-dark-mode-only],
.vscode-high-contrast:not(.vscode-high-contrast-light) img[src$=\#gh-light-mode-only],
.vscode-high-contrast-light img[src$=\#gh-dark-mode-only] {
	display: none;
}

</style>
            
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/markdown.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/highlight.css">
<style>
            body {
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif;
                font-size: 14px;
                line-height: 1.6;
            }
        </style>
        <style>
.task-list-item {
    list-style-type: none;
}

.task-list-item-checkbox {
    margin-left: -20px;
    vertical-align: middle;
    pointer-events: none;
}
</style>
<style>
:root {
  --color-note: #0969da;
  --color-tip: #1a7f37;
  --color-warning: #9a6700;
  --color-severe: #bc4c00;
  --color-caution: #d1242f;
  --color-important: #8250df;
}

</style>
<style>
@media (prefers-color-scheme: dark) {
  :root {
    --color-note: #2f81f7;
    --color-tip: #3fb950;
    --color-warning: #d29922;
    --color-severe: #db6d28;
    --color-caution: #f85149;
    --color-important: #a371f7;
  }
}

</style>
<style>
.markdown-alert {
  padding: 0.5rem 1rem;
  margin-bottom: 16px;
  color: inherit;
  border-left: .25em solid #888;
}

.markdown-alert>:first-child {
  margin-top: 0
}

.markdown-alert>:last-child {
  margin-bottom: 0
}

.markdown-alert .markdown-alert-title {
  display: flex;
  font-weight: 500;
  align-items: center;
  line-height: 1
}

.markdown-alert .markdown-alert-title .octicon {
  margin-right: 0.5rem;
  display: inline-block;
  overflow: visible !important;
  vertical-align: text-bottom;
  fill: currentColor;
}

.markdown-alert.markdown-alert-note {
  border-left-color: var(--color-note);
}

.markdown-alert.markdown-alert-note .markdown-alert-title {
  color: var(--color-note);
}

.markdown-alert.markdown-alert-important {
  border-left-color: var(--color-important);
}

.markdown-alert.markdown-alert-important .markdown-alert-title {
  color: var(--color-important);
}

.markdown-alert.markdown-alert-warning {
  border-left-color: var(--color-warning);
}

.markdown-alert.markdown-alert-warning .markdown-alert-title {
  color: var(--color-warning);
}

.markdown-alert.markdown-alert-tip {
  border-left-color: var(--color-tip);
}

.markdown-alert.markdown-alert-tip .markdown-alert-title {
  color: var(--color-tip);
}

.markdown-alert.markdown-alert-caution {
  border-left-color: var(--color-caution);
}

.markdown-alert.markdown-alert-caution .markdown-alert-title {
  color: var(--color-caution);
}

</style>
        
        </head>
        <body class="vscode-body vscode-light">
            <h1 id="ui设计方案">UI设计方案</h1>
<h2 id="1-整体布局设计">1. 整体布局设计</h2>
<h3 id="11-布局结构">1.1 布局结构</h3>
<pre><code>+------------------+
|      Header      |
+------------------+
|   |              |
| N  |    Main     |
| a  |    Content  |
| v  |    Area     |
|    |              |
+------------------+
</code></pre>
<h3 id="12-配色方案">1.2 配色方案</h3>
<ul>
<li>主色调：#1890ff（明亮蓝）</li>
<li>辅助色：
<ul>
<li>成功：#52c41a</li>
<li>警告：#faad14</li>
<li>错误：#f5222d</li>
</ul>
</li>
<li>中性色：
<ul>
<li>背景：#f0f2f5</li>
<li>文字：#000000d9</li>
<li>次要文字：#00000073</li>
</ul>
</li>
</ul>
<h3 id="13-字体规范">1.3 字体规范</h3>
<ul>
<li>标题：20px, 加粗</li>
<li>副标题：16px, 加粗</li>
<li>正文：14px</li>
<li>辅助文字：12px</li>
</ul>
<h2 id="2-页面详细设计">2. 页面详细设计</h2>
<h3 id="21-点名页面">2.1 点名页面</h3>
<h4 id="布局示意">布局示意</h4>
<pre><code>+------------------------+------------------+
|     点名进度展示       |    奖金排行      |
| [随机点名] 3/30       |  1. 张三 ¥3000  |
+------------------------+  2. 李四 ¥2400  |
|    被点名学员展示      |  3. 王五 ¥2100  |
|  +------------------+ |                 |
|  | 学员：张三        | |    今日奖金      |
|  | [邀请面试官]      | |  面试官：¥1500  |
|  +------------------+ |  求职者：¥3000  |
|  +------------------+ |                 |
|  | 学员：李四        | |    本周奖金      |
|  | [邀请面试官]      | |  面试官：¥5000  |
|  +------------------+ |  求职者：¥9000  |
|  +------------------+ |                 |
|  | 学员：王五        | |                 |
|  | [邀请面试官]      | |                 |
|  +------------------+ |                 |
+------------------------+------------------+
|      面试官选择区域                      |
| +------------------------------------+  |
| |  面试官：赵六                        |  |
| |  提问：React生命周期                 |  |
| |  [会] [不会]  奖励：¥300             |  |
| +------------------------------------+  |
| |  面试官：钱七                        |  |
| |  提问：Vue组件通信                   |  |
| |  [会] [不会]  奖励：¥300             |  |
| +------------------------------------+  |
+-------------------------------------------+
</code></pre>
<h4 id="交互说明">交互说明</h4>
<ol>
<li>
<p>随机点名按钮</p>
<ul>
<li>位置：点名进度展示区域</li>
<li>样式：主要按钮，蓝色背景</li>
<li>点击效果：弹出确认框</li>
<li>动画：点击后有加载动画</li>
</ul>
</li>
<li>
<p>学员卡片</p>
<ul>
<li>背景：浅色背景</li>
<li>阴影：轻微阴影效果</li>
<li>边框：圆角设计</li>
<li>悬停效果：轻微上浮</li>
</ul>
</li>
<li>
<p>邀请面试官按钮</p>
<ul>
<li>位置：每个学员卡片右侧</li>
<li>样式：次要按钮，边框样式</li>
<li>点击效果：
<ul>
<li>展开面试官选择面板</li>
<li>自动滚动到面试官区域</li>
<li>显示面试官选择列表</li>
</ul>
</li>
</ul>
</li>
<li>
<p>面试官评分区</p>
<ul>
<li>布局：面试官信息 + 提问内容 + 评分按钮</li>
<li>评分按钮：
<ul>
<li>会：绿色按钮</li>
<li>不会：红色按钮</li>
</ul>
</li>
<li>奖励显示：实时更新</li>
<li>动画：评分后有奖励金额动画</li>
</ul>
</li>
<li>
<p>奖金排行榜</p>
<ul>
<li>实时更新</li>
<li>带有动画效果</li>
<li>分类显示：
<ul>
<li>今日奖金</li>
<li>本周奖金</li>
</ul>
</li>
<li>排名效果：
<ul>
<li>前三名特殊样式</li>
<li>金额变化动画</li>
</ul>
</li>
</ul>
</li>
</ol>
<h4 id="响应式设计">响应式设计</h4>
<ul>
<li>大屏（≥1200px）：完整双栏布局</li>
<li>中屏（≥992px）：紧凑双栏布局</li>
<li>小屏（&lt;992px）：单栏布局，奖金排行置于底部</li>
</ul>
<h4 id="动画效果">动画效果</h4>
<ol>
<li>
<p>点名动画</p>
<ul>
<li>随机点名时的抽奖效果</li>
<li>名字闪烁动画</li>
<li>选中后的放大效果</li>
</ul>
</li>
<li>
<p>奖励动画</p>
<ul>
<li>数字滚动效果</li>
<li>金额增加时的上浮动画</li>
<li>排名变化时的位移动画</li>
</ul>
</li>
<li>
<p>评分动画</p>
<ul>
<li>按钮点击波纹效果</li>
<li>奖励发放时的庆祝动画</li>
<li>状态切换过渡效果</li>
</ul>
</li>
</ol>
<h4 id="交互优化">交互优化</h4>
<ol>
<li>
<p>快捷操作</p>
<ul>
<li>键盘快捷键支持</li>
<li>批量操作支持</li>
<li>拖拽排序支持</li>
</ul>
</li>
<li>
<p>反馈优化</p>
<ul>
<li>操作确认提示</li>
<li>错误友好提示</li>
<li>成功反馈动画</li>
</ul>
</li>
<li>
<p>性能优化</p>
<ul>
<li>列表虚拟滚动</li>
<li>按需加载数据</li>
<li>本地缓存状态</li>
</ul>
</li>
</ol>

            
            
        </body>
        </html>